import React, { useState, useEffect } from 'react';
import { Form, Input, Select, DatePicker, Checkbox } from 'antd';
import { connect } from 'umi';


const { RangePicker } = DatePicker;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 },
  },
};

const names = {
  name1: 'businessId', //数据源
  // name2: 'applyType', //权限类型
  name3: 'workSpaceId', //所属空间
  // name4: 'drive', //申请账号
  name5: 'time', //申请时间
  name6: 'reason', //理由
};

var UserAdd = props => {
  const [form] = Form.useForm();
  const { user } = props.user;
  useEffect(() => {
    if (props.init) props.init(form);
  }, []);

  //修改model中的值
  const changeState = obj => {
    props.dispatch({
      type: 'UserList/setState',
      payload: obj,
    });
  };

  // // 改变checkedbox
  // const changeApplyType = (flag, type) => {
  //   let obj = applyType;
  //   obj[type] = flag;
  //   changeState({
  //     applyType: obj,
  //   });
  // };
  const {
    allDataTypeList, //所有数据源类型
    applyType,
    workSpaceName,
  } = props.MyRole;
  return (
    <div style={{boxSizing:'border-box',paddingRight:"45px"}}>
    
        <Form {...formItemLayout} form={form}>
          <Form.Item
            name={names.name1}
            label="数据源"
            rules={[{ required: true, message: '请填写数据源类型' }]}
          >
            <Select placeholder="请选择..." allowClear>
              {allDataTypeList?.map((item, ind) => {
                return (
                  <Select.Option key={ind} value={item.id}>
                    {item.name}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
          {/* <Form.Item
          name={names.name2}
          label={<span className={'must'}>权限类型</span>}
        >
          <Checkbox
            onChange={e => {
              changeApplyType(e.target.checked, 'box1');
            }}
          >
            同步读
          </Checkbox>
          <Checkbox
            onChange={e => {
              changeApplyType(e.target.checked, 'box2');
            }}
          >
            同步写
          </Checkbox>
        </Form.Item> */}
          <Form.Item
            name={names.name3}
            label="所属空间"
            rules={[{ required: true, message: '必须填写' }]}
          >
            <Select placeholder="请选择..." onChange={e => {}}>
              {workSpaceName?.map((item, ind) => {
                return (
                  <Select.Option key={ind} value={item.id}>
                    {item.name}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item name={names.name4} label="申请账号">
            <Input disabled={true} defaultValue={user.username} />
          </Form.Item>
          <Form.Item
            name={names.name5}
            label="有效期"
            rules={[{ required: true, message: '必须填写' }]}
          >
            <RangePicker />
          </Form.Item>
          <Form.Item
            name={names.name6}
            label="申请理由"
            rules={[{ required: true, message: '必须填写' }]}
          >
            <Input.TextArea placeholder="请输入内容" />
          </Form.Item>
        </Form>
   
    </div>
  );
};
export default connect(({ MyRole, user }) => ({ MyRole, user }))(UserAdd);
